<template>
	<view>
		<view class="region_poup" v-show="is_show">
			<view class="poup-title border-b">
				<view class="poup-title-left" @click="quxiao">
					<text>取消</text>
				</view>
				<view class="poup-title-center">
					选择区域
				</view>
				<view class="poup-title-right" @click="confirm">
					确定
				</view>
			</view>
			<!-- <view class="selected_title border-b">
				当前选的是：{{province_name}}{{city_name}}{{area_name}}
			</view> -->
			<view class="region_m">
				<view class="region_m_item border-r">
					<scroll-view scroll-y="true" style="width: 100%;height: 100%;" >
						<view class="region_item" @click="select_province(item)" :class="{'item-acticve':province_id == item.id}" v-for="(item,index) in province_list">{{item.title}}</view>
					</scroll-view>
				</view>
				<view class="region_m_item border-r">
					<scroll-view scroll-y="true" style="width: 100%;height: 100%;" >
						<view class="region_item" @click="select_city(item)" :class="{'item-acticve':city_id == item.id}" v-for="(item,index) in city_list">{{item.title}}</view>
					</scroll-view>
				</view>
				<view class="region_m_item">
					<scroll-view scroll-y="true" style="width: 100%;height: 100%;" >
						<view class="region_item" @click="select_area(item)" :class="{'item-acticve':area_id == item.id}" v-for="(item,index) in area_list">{{item.title}}</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {province,city,area} from "@/config/js/city_data.js"
	export default {
		data() {
			return {
				province_list:[],
				city_list:[],
				area_list:[],
				province_id:'',
				city_id:'',
				area_id:'',
				province_name:'',
				city_name:'',
				area_name:'',
			}
		},
		props:[
			"is_show"
		],
		mounted() {
			this.init_data();
		},
		methods: {
			confirm(){
				let arr = {
					name:[],
					id:[]
				};
				
				arr.name = [this.province_name,this.city_name,this.area_name];
				arr.id = [this.province_id,this.city_id,this.area_id];
				this.$emit('confirm',arr)
			},
			quxiao(){
				this.$emit('cancel')
			},
			async init_data(){
				let region_id = await this.get_province_list();
				console.log(region_id)  
				let region_city_id = await this.get_city_list(region_id);
				await this.get_area_list(region_city_id);
			},
			get_province_list(){
				return new Promise((resolve, reject) => {
					this.province_list = province
					this.province_id = province[0].id
					this.province_name = province[0].title
					resolve(province[0].id);
				})
			},
			get_city_list(region_id){
				return new Promise((resolve, reject) => {
					let arr = city[region_id] || [];
					for(let i in city){
						if(i == region_id){
							arr = city[region_id]
						}
					}
					this.city_list = arr
					this.city_id = arr[0].id
					this.city_name = arr[0].title
					resolve(arr[0].id);

				})
			},
			get_area_list(region_id){
				let arr = area[region_id] || [];
				
				this.area_list = arr
				this.area_id = arr[0].id
				this.area_name = arr[0].title

			},
			async select_province(item){
				this.province_id = item.id
				this.province_name = item.title
				this.city_name = ''
				this.area_name = ''
				this.city_id=''
				this.area_id=''
				let region_city_id = await this.get_city_list(item.id);
				await this.get_area_list(region_city_id);
			},
			select_city(item){
				this.city_id = item.id
				this.city_name = item.title
				this.area_name = ''
				this.area_id=''
				
				this.get_area_list(item.id);
			},
			select_area(item){
				this.area_id = item.id
				this.area_name = item.title
				
			}
			
		}
	}
</script>

<style>
	.border-b {
		border-bottom: 1px solid #e0e0e0;
	}
	.item-acticve{
		font-size: 24rpx!important;
		background: #FFFFFF!important;
		color: #272727!important;
	}
	.poup-title {
		display: flex;
		align-items: center;
		height: 100rpx;
		background: #ffffff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	
	}
	
	.poup-title-left {
		display: flex;
		width: 120rpx;
		justify-content: center;
		font-size: 28rpx;
	}
	
	.poup-title-center {
		display: flex;
		flex: 1;
		justify-content: center;
		font-size: 30rpx;
	}
	
	.poup-title-right {
		display: flex;
		width: 120rpx;
		align-items: center;
		justify-content: center;
		color: #fc871e;
		font-size: 28rpx;
	}
	.region_poup{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.4);
	}
	.selected_title{
		display: flex;
		align-items: center;
		height: 90rpx;
		font-size: 24rpx;
		color: #272727;
		padding: 0 30rpx;
		background: #FFFFFF;
	}
	.region_m{
		display: flex;
		height: 500rpx;
		background: #f5f5f5;
		margin-bottom: 160rpx;
	}
	.region_m_item{
		display: flex;
		flex: 1;
		flex-direction: column;
		height: 100%;
	}
	.region_item{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 70rpx;
		background: #F5F5F5;
		font-size: 24rpx;
		color: #999999;
	}
	.border-r{
		border-right: 1px solid #e0e0e0;
	}
</style>
